<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
    //获取画布
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    var kaiguan=false
    cas.onmousedown=function(e){
        kaiguan=true;
        //重新开启路径
        ctx.beginPath()

    }
    cas.onmousemove=function(e){
        if(!kaiguan){
            return;

        }
        //获取鼠标相对画布的坐标
        var x= e.offsetX;
        var y= e.offsetY;
        //定点
        ctx.lineTo(x,y)
        //连线
        ctx.stroke()
    }
    cas.onmouseup=function(e){
        kaiguan=false
    }
    cas.onmouseoutn=function(e){
        kaiguan=false
    }


</script>

</body>
</html>